<template>
	<view class="action-menu-box">
		<view class="action-menu-header">
			<view class="action-menu-header-icon" v-if="showIcon">
				<image :src="menuIcon"></image>
			</view>
			<view class="action-menu-header-title">{{menuTitle}}</view>
		</view>
		<view class="action-menu-main">
			<view class="action-menu-main-item" v-for="(item, index) in menuItems" :key="index">
				<text>{{item.title}}</text>
				<text v-if="item.num" class="menu-item-number">[{{item.num}}]</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showIcon: {
				type: Boolean,
				default () {
					return true
				}
			},
			menuIcon: {
				type: String,
				default () {
					return ''
				}
			},
			menuTitle: {
				type: String,
				default () {
					return ''
				}
			},
			menuItems: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.action-menu-box {
		padding: 10px 16px;
		border-top: 1px solid #dedede;

		.action-menu-header {
			display: flex;
			align-items: center;

			.action-menu-header-icon {
				margin-right: 5px;
				width: 20px;
				height: 20px;
				background-color: #808080;

				image {
					height: 100%;
					width: 100%;
				}

			}

			.action-menu-header-title {
				color: #333333;
			}

		}

		.action-menu-main {
			padding: 10px 0;
			display: flex;
			text-align: left;
			font-size: 12px;

			.action-menu-main-item {
				flex: 0 25%;

				.menu-item-number {
					margin-left: 3px;
					color: red;
				}

			}

		}

	}
</style>
